<template>
  <div class="shop-box">
    <van-nav-bar
      title="商城"
      left-text=""
      :border="false"
      right-text="说明"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 商城大图 -->
    <div class="fs-big">
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img width="100%" src="https://img1.baidu.com/it/u=624757801,3433992313&fm=253&fmt=auto&app=138&f=PNG?w=500&h=281" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=2558050549,3870501924&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=996979463,4265742573&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=1757860612,855392982&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img0.baidu.com/it/u=2035734252,3546595099&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img0.baidu.com/it/u=3506605518,3133026780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""></van-swipe-item>
  
</van-swipe>
    </div>
    <!-- s商品区域 -->
    <div class="shopping">
        <div class="news">
            <h3>最新上架</h3>
            <ul>
                <li>
                    <div class="li-t">
                        <img width="100%" src="https://img2.baidu.com/it/u=57370442,3141393369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=800" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                <li>
                    <div class="li-t">
                        <img width="100%"   src="https://img1.baidu.com/it/u=447813659,4265945137&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=800" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                <li>
                    <div class="li-t">
                        <img width="100%" src="https://img0.baidu.com/it/u=3069572763,1827118846&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=444" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
            </ul>
        </div>
        <div class="hot">
            <h3>热门推荐</h3>
            <ul>
                <li>
                    <div class="li-t">
                        <img  width="100%" src="https://img2.baidu.com/it/u=1628931446,4104233788&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=993" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                <li>
                    <div class="li-t">
                        <img  width="100%" src="https://img2.baidu.com/it/u=3506921904,3765455977&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                <li>
                    <div class="li-t">
                        <img  width="100%" src="https://img0.baidu.com/it/u=2881818868,440968868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=885" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                <li>
                    <div class="li-t">
                        <img  width="100%" src="https://img1.baidu.com/it/u=2112228536,3956785911&fm=253&fmt=auto&app=138&f=JPEG?w=611&h=500" alt="">
                    </div>
                    <div class="li-b">
                        <h4>众星捧月</h4>
                        <p>6000钻</p>
                    </div>
                </li>
                <!--  -->
                
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    methods: {
    onClickLeft() {
      //  Toast('返回');
      this.$router.push("find");
      // console.log(1);
    },
    onClickRight() {
      //   Toast('按钮');
    },
  },
};
</script>

<style lang="scss" >
.shop-box{
    width: 90%;
    color: white;
    margin: 0 auto;
    .van-nav-bar {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #1a1a1a;
  }
  .van-nav-bar__content {
    height: 80px;
    //
  }
  .van-nav-bar__title {
    height: 80px;
    font-size: 40px;
    line-height: 80px;
    color: #9a9aa4;
  }
  .van-icon-arrow-left {
    font-size: 40px;
    color: #9a9aa4;
  }
  .van-nav-bar__right {
    font-size: 28px;
    color: #9a9aa4;
  }
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
  .fs-big{
    width: 90%;
    height: 320px;
    margin: 0 auto;
    background-color: #cecece;
  }
  .shopping{
    width: 90%;
    height: 900px;
    margin: 0 auto;
    h3{
            font-size: 32px;
            height: 60px;
            line-height: 60px;
        }
    .news,.hot{
        width: 100%;
        height: 400px;
        ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: 30px 0;
            justify-content: space-between;
            li{
            width: 200px;
            height: 280px;
            margin: 10px 0;
            // background-color: #efefef;
            border-radius: 25px;
            
            .li-t{
                width: 100%;
                height: 180px;
                overflow: hidden;
            }
            .li-b{
                width: 100%;
                height: 100px;
                background-color: #3b2f5f;
                border-bottom-right-radius: 25px;
                border-bottom-left-radius:25px ;
                display: flex;
                flex-direction: column;
                justify-content: center;
                h4{
                    font-size: 28px;
                    text-align: center;
                }
                p{
                    font-size: 24px;
                    text-align: center;
                }
            }
        }
        }
        
    }
  }
}
</style>